<template>
	<view class="addvisitor-container">

		<view class="visitor-form">
			<u-calendar :show="calenderShow" @close="closeCalender" @confirm="getCalender"></u-calendar>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">

				</u-col>

				<u-col span="10">
					<u--form labelPosition="left" :model="notice" :rules="rules" ref="formVisitor"
						:errorType="errorType">
						
						
						<u-form-item prop="noticeTitle" borderBottom ref="noticeTitle">
							<u--input v-model="notice.noticeTitle" border="none" clearable placeholder="请输入校园通知标题"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
						</u-form-item>


						<u-form-item prop="phoneNumber" borderBottom ref="phoneNumber">
							<view class="richtext">
								<piaoyiEditor :values="values" :header="header" v-model="notice.releaseStatus"
									:maxlength="3000" @changes="saveContens" :readOnly="readOnly" :photoUrl="photoUrl"
									:api="api" :name="name" />
								<!-- <view class="">
									{{txt}}
								</view> -->
							</view>
						</u-form-item>



						<u-form-item prop="imagersUpload" borderBottom ref="imagersUpload">
							<u--input v-model="notice.imagersUpload" border="none" clearable placeholder="请选择图片"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
								@focus="getImgUrl"></u--input>
						</u-form-item>
						
						
						
						
						<u-form-item prop="imagersUpload" borderBottom ref="imagersUpload">
						<u-radio-group v-model="notice.state" placement="row" @change="groupChange">
							<u-radio :customStyle="{marginBottom: '8px',marginRight: '8px'}" v-for="(item, index) in radiolist1"
								:key="index" :label="item.name" :name="item.value">
							</u-radio>
						</u-radio-group>
						</u-form-item>
						
						

					<!-- 	<u-form-item prop="founder" borderBottom ref="founder">
							<u--input v-model="notice.founder" border="none" clearable placeholder="请输入发布人"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
						</u-form-item>
 -->




					</u--form>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>

				<u-col span="10">
					<u-button type="primary" text="保存" @click="addNotice"></u-button>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>

		</view>
	</view>
</template>

<script>
	import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
	export default {
		components: {
			piaoyiEditor
		},
		data() {
			return {
				radiolist1: [{
				            name: '发布中',
				            value: 1
				          },
				            {
				              name: '暂停发布',
				              value: 2
				            },
				          ],
				          // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				        
				readOnly: false, //是否只读
				photoUrl: 'https://www.gzzyue.com', //服务器图片域名或者ip
				api: '/prod-api/common/upload', //上传图片接口地址
				txt: '',
				name: 'file',
				values: '<div></div>',
				header: {
					'Authorization': uni.getStorageSync("token") //自定义请求头信息
				},
				calenderShow: false,
				notice: {
				    state: 1,
					imagersUpload: '',
					visitorName: '',
					phoneNumber: '',
					intervieweeName: '',
					intervieweePhoneNumber: '',
					appointmentName: '',
					visitorIdNumber: '',
					founder: '',
					releaseStatus: '',
					vehicleInformation: ''
				},
				rules: {
					'visitorName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'phoneNumber': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'intervieweeName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'intervieweePhoneNumber': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'appointmentName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'visitorIdNumber': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'peer': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'vehicleInformation': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},

				},
				errorType: 'border-bottom', // 错误提示类型:下划线
			}
		},
		methods: {
  groupChange(n) {
        console.log('groupChange', n);
      },
      // radioChange(n) {
      //   console.log('radioChange', n);
      // },
			getImgUrl() {
				var _this = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://www.gzzyue.com/prod-api/common/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'Authorization': uni.getStorageSync("token") //自定义请求头信息
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								var obj = JSON.parse(uploadFileRes.data)
								console.log(obj.fileName);
								_this.notice.imagersUpload = obj.fileName
							}
						});
					}
				});
			},
			saveContens(e) {
				// this.txt = e.html
				// this.values=e.html
				this.notice.releaseStatus = e.html
			},
			addNotice() {
				// console.log('values',this.notice.releaseStatus)
				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/campusNotice',
						// url: 'https://www.gzzyue.com/prod-api/system/campusNotice/api/addNotice',
					method: 'POST',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					data: this.notice,
					success: (res) => {
						console.log('res:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								uni.$u.toast('预约成功')
								uni.navigateBack()
							
								uni.$emit('addNotice', this.notice)
							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			},
			openCalender() {
				this.calenderShow = true
			},
			closeCalender() {
				this.calenderShow = false
			},
			getCalender(e) {
				console.log('e', e)
				this.notice.appointmentName = e[0]
				this.closeCalender()
			}
		}
	}
</script>

<style>
	.container {
		padding: 10px;
	}

	#editor {
		width: 100%;
		height: 300px;
		background-color: #CCCCCC;
	}

	button {
		margin-top: 10px;
	}
</style>
